<template>
	<view class="apps">
		<uv-navbar title="设备详情" titleStyle="font-weight:400;" bg-color="rgba(255,255,255,.01)" placeholder :autoBack="true"></uv-navbar>
		<image class="bg" src="https://lifeanclor.byyds.cn/static/images/lan.jpg" mode="widthFix"></image>
		<uv-gap height="20"></uv-gap>
		<view class="pr zidx6 mlr30 bdbox bgwhite plr20 ptb20 bdr20 flex">
			<uv-avatar src="https://lifeanclor.byyds.cn/static/images/machine_true.png" shape="circle" size="50"></uv-avatar>
			<view class="flex fdc jcc ml10">
				<view class="f14 c333">名称成成阿凡达撒旦法</view>
				<view class="flex aic mt20">
					<view class="f12 cred mr20">水质优</view>
					<uv-icon name="https://lifeanclor.byyds.cn/static/images/MdiWifi.png" size="16"></uv-icon>
				</view>
			</view>
		</view>
		<view class="pr zidx6 mlr30 bdbox bgwhite plr20 ptb20 bdr20 mt30">
			<uv-grid :border="false" col="3">
				<uv-grid-item>
					<view class="flex fdc  bdr15 boxsds mtb20 ptb20 plr20 w150 bgimg2b6 cfff">
						<view class="f13 fw400">TDS</view>
						<view class="flex">
							<text class="f15 fw400 mb10">18</text>
							<text class="mt10 f12 ">ppm</text>
						</view>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="flex fdc  bdr15 boxsds mtb20 ptb20 plr20 w150 bgimge2e7">
						<view class="f13 fw400">pH</view>
						<view class="flex">
							<text class="f15 fw400 mb10">7.1</text>
							<text class="mt10 f12 "></text>
						</view>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="flex fdc bdr15 boxsds mtb20 ptb20 plr20 w150 bgimge2e7">
						<view class="f13">浊度</view>
						<view class="flex">
							<text class="f15 fw400 mb10">30</text>
							<text class="mt10 f12">pmp</text>
						</view>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="flex fdc  bdr15 boxsds mtb20 ptb20 plr20 w150 bgimge2e7" >
						<view class="f13 fw400">滤芯寿命</view>
						<view class="flex">
							<text class=" f15 fw400 mb10">50</text>
							<text class="mt10 f12">%</text>
						</view>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="flex fdc  bdr15 boxsds mtb20 ptb20 plr20 w150 c333 bgimge2e7" >
						<view class="f13 fw400">总出水</view>
						<view class="flex">
							<text class=" f15 fw400 mb10">1500</text>
							<text class="mt10 f12">ml</text>
						</view>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="flex fdc  bdr15 boxsds mtb20 ptb20 plr20 w150 c333 bgimge2e7" >
						<view class="f13 fw400">今日出水</view>
						<view class="flex">
							<text class="f15 fw400 mb10">560</text>
							<text class="mt10 f12">ml</text>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="pr zidx6 mlr30 bdbox bgwhite bdr20 mt30" style="width:690rpx;box-sizing: border-box;">
			<view class="f1">
				<view class="f15 c333 pl20 mb20 mt20 c02A33">TDS 周视图</view>
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="pr zidx6 mlr30 bdbox bgwhite plr20 ptb20 bdr20 mt30 mb50">
			<view class="f15 fw400 c333 mt20">个性化定制</view>
			<vieww class="mt20">
				<uv-grid :border="false" col="4">
					<uv-grid-item @click="handle('/pages/device/module?mode=basic')">
						<uv-icon name="https://lifeanclor.byyds.cn/static/images/k1.png" size="30"></uv-icon>
						<view class="mt20 flex jcc f14 c666">常规模式</view>
					</uv-grid-item>
					<uv-grid-item @click="handle('/pages/device/module?mode=general')">
						<uv-icon name="https://lifeanclor.byyds.cn/static/images/k2.png" size="30"></uv-icon>
						<view class="mt20 flex jcc f14 c666">一般定制</view>
					</uv-grid-item>
					<uv-grid-item @click="handle('/pages/device/module?mode=unique')">
						<uv-icon name="https://lifeanclor.byyds.cn/static/images/k3.png" size="30"></uv-icon>
						<view class="mt20 flex jcc f14 c666">独家定制</view>
					</uv-grid-item>
					<uv-grid-item @click="handle('/pages/device/module?mode=kettle')">
						<uv-icon name="https://lifeanclor.byyds.cn/static/images/k4.png" size="30"></uv-icon>
						<view class="mt20 flex jcc f14 c666">水壶模式</view>
					</uv-grid-item>
				</uv-grid>
			</vieww>
		</view>
	</view>
</template>

<script setup>
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
	const opts=ref({ 
		type: 'area', 
		color: ['#91CB74', '#FAC858', '#EE6666','#1890FF', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [15, 10, 0, 15], 
		
		xAxis: { disableGrid: true },
		yAxis: { gridType: 'dash', dashLength: 1 }, 
		legend: {}, 
		extra: { 
			area: { linearType: 'custom', linearOpacity: 0.9, type: 'straight', width: 2,activeType: "hollow" } ,
		} ,
	}),chartData = ref({
					categories: ['一', '二', '三', '四','五','六','日'],
					series: [{ name: 'Tds', data: [35, 8, 25, 37,25, 37,35] },]
				})
	const choose = ()=>{
		
	},handle=(e)=>{
		uni.navigateTo({
			url:e
		})
	}
	
	onLoad(()=>{
		
	})
</script>